<template>
    <a-modal
            :visible="adduserimgVisible"
            title="上传头像"
            cancelText="取消"
            okText="确定"
            @cancel="cancel"
            @ok="handleSubmit"
            width="300px"
    >
        <div class="clearfix" style="margin-left: 70px">
            <a-upload
                    :action="'http://localhost:8080/api/user/uploadImg/'+userId"
                    list-type="picture-card"
                    @preview="handlePreview"
                    :file-list="fileList"
                    :before-upload="beforeUpload"
                    @change="handleChange"

            >
                <div v-if="fileList.length < 1">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                        Upload
                    </div>
                </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
        </div>
<!--        <a-upload-dragger-->
<!--                name="file"-->
<!--                list-type="picture"-->
<!--                :action="'http://localhost:8080/api/hotel/uploadImg/'+hotelId"-->
<!--                @change="handleChange"-->
<!--        >-->
<!--            <p class="ant-upload-drag-icon">-->
<!--                <a-icon type="inbox" />-->
<!--            </p>-->
<!--            <p class="ant-upload-text">-->
<!--                点击或拖拽文件进行上传-->
<!--            </p>-->
<!--            <p class="ant-upload-hint">-->
<!--                Support for a single or bulk upload. Strictly prohibit from uploading company data or other-->
<!--                band files-->
<!--            </p>-->
<!--        </a-upload-dragger>-->
    </a-modal>
</template>

<script>
    import {mapActions, mapGetters, mapMutations} from "vuex";
    function getBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }
    export default {
        name: "adduserimg",
        data() {
            return {
                previewVisible: false,
                previewImage: '',
                fileList: []
            }
        },
        computed: {
            ...mapGetters([
                'userId',
                'adduserimgVisible',
            ]),
            tokenSecret() {
                const token = localStorage.getItem("token");
                return token ? ("token " + token) : ""
            }
        },
        methods: {
            ...mapActions([
                'getuserpic'
            ]),
            ...mapMutations([
                'set_adduserimgVisible'
            ]),
            handleSubmit(){
                this.set_adduserimgVisible(false);
            },
            cancel(){
                this.set_adduserimgVisible(false);
            },
            handleCancel() {
                this.previewVisible = false;
            },
            beforeUpload(file) {
                const isLt2M = file.size < 1048576;
                if (!isLt2M) {
                    this.$message.error('图片过大');
                }
                return  isLt2M;
            },
            handleChange(info) {
                this.fileList = info.fileList;

                const status = info.file.status;
                if (status === 'done') {
                    this.$message.success(`图片上传成功`);
                    this.getuserpic(this.userId)
                } else if (status === 'error') {
                    this.$message.error(`图片上传失败`);
                }

            },  async handlePreview(file) {
                if (!file.url && !file.preview) {
                    file.preview = await getBase64(file.originFileObj);
                }
                this.previewImage = file.url || file.preview;
                this.previewVisible = true;
            },

        }
    }
</script>

<style scoped  lang="less">

    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
</style>